<template>
  <MyDialog
    title="设备实时信息"
    :visible="showDialog"
    @close="close"
    @ok="close"
  >
    <el-row v-loading="loading" :gutter="10">
      <el-col
        v-for="(item, index) in infoList"
        :key="index"
        :span="8"
        class="info"
      >
        <div class="term">
          {{ item.label }}：
        </div>
        <div class="detail">
          <el-tooltip v-if="item.value"
                      class="item"
                      effect="dark"
                      :content="item.value"
                      placement="top"
          >
            <span v-if="item.value">{{ item.value }}</span>
          </el-tooltip>
          <span v-else>--</span>
        </div>
      </el-col>
    </el-row>
  </MyDialog>
</template>

<script>
import dialogMixin from "@/mixins/dialogMixin";
import { fetchDeviceRealTimeInfo } from "@/api/deviceManage";
export default {
  mixins: [dialogMixin],
  props: {
    sn: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      loading: false,
      infoList: [
        {
          label: "设备名称",
          key: "name",
        },
        {
          label: "设备编号",
          key: "sn",
        },
        {
          label: "在线状态",
          key: "onlineStatus",
        },
        {
          label: "在线状态码",
          key: "onlineCode",
        },
        {
          label: "激活时间",
          key: "activationTime",
        },
        {
          label: "运营商",
          key: "ispName",
        },
        {
          label: "运营商",
          key: "ispName",
        },
        {
          label: "nat类型",
          key: "nat",
        },
        {
          label: "磁盘总空间",
          key: "diskTotal",
        },
        {
          label: "硬盘已使用容量",
          key: "diskUsed",
        },
        {
          label: "CPU使用率",
          key: "cpuUsedRate",
        },
        {
          label: "内存使用率",
          key: "memUsedRate",
        },
        {
          label: "测速宽带",
          key: "upload",
        },
        {
          label: "丢包率",
          key: "pingLoss",
        },
        {
          label: "延迟",
          key: "pingRtt",
        },
        {
          label: "Upnp网关",
          key: "upnpGateway",
        },
        {
          label: "内网ip",
          key: "localIp",
        },
        {
          label: "公网ip",
          key: "publicIp",
        },
      ],
    };
  },

  mounted() {
    this.getDeviceInfo();
  },
  methods: {
    getDeviceInfo() {
      this.loading = true;
      fetchDeviceRealTimeInfo({ sn: this.sn })
        .then((res) => {
          for (let item of this.infoList) {
            this.$set(item, "value", res.data[item.key]);
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.info {
  line-height: 36px;
  font-size: 14px;
  display: flex;
  .detail {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>
